<template>
    <div class="et_0_6">
      <div class="main">
        <div class="tab">
          <div>
            <el-button
              v-for="item in tab_btns"
              :key="item.index"
              :class="item.index == isTab_Now ? 'btnY' : 'btnN'"
              @click="isTab_Now = item.index"
              >{{ item.name }}</el-button
            >
          </div>
          <div class="box" name="居民健康档案封面" v-if="isTab_Now == 1" style="width: 70%;">
              <etjbxx></etjbxx>
          </div>
          <div class="box" name="儿童健康" v-if="isTab_Now == 2" style="width: 100%;">
              <etjk></etjk>
          </div>
          <div class="box" name="眼保健操" v-if="isTab_Now == 3" style="width: 100%;">
              <ybjc></ybjc>
          </div>
          <div class="box" name="儿童中医药" v-if="isTab_Now == 4" style="width: 100%;">
              <etzy></etzy>
          </div>
          <div class="box" name="儿童生长发育曲线（2006WHO标准）" v-if="isTab_Now == 5" style="width: 100%;">
              <etszfyqx_2006></etszfyqx_2006>
          </div>
          <div class="box" name="儿童生长发育曲线（2006WHO标准）" v-if="isTab_Now == 6" style="width: 100%;">
              <etszfyqx_2006></etszfyqx_2006>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import etjbxx from "@/views/tab_info/etjbxx.vue"; // 儿童基本信息
  import etjk from "@/views/tab_info/etjk.vue"; // 儿童健康
  import ybjc from "@/views/tab_info/ybjc.vue"; // 眼保健操
  import etzy from "@/views/tab_info/etzy.vue"; // 儿童中医药
  import etszfyqx_2006 from "@/views/tab_info/etszfyqx_2006.vue"; // 儿童生长发育曲线（2006WHO标准）
  export default {
    components: {
      etjbxx,
      etjk,
      ybjc,
      etzy,
      etszfyqx_2006
    },
    data() {
      return {
        tab_btns: [
          {
            index: 1,
            name: "基本信息表",
          },
          {
            index: 2,
            name: "儿童健康",
          },
          {
            index: 3,
            name: "眼保健及视力检查（2021）",
          },
          {
            index: 4,
            name: "儿童中医药",
          },
          {
            index: 5,
            name: "儿童生长发育曲线（2006WHO标准）",
          },
          {
            index: 6,
            name: "儿童生长发育曲线（2009国家标准）",
          }
        ],
        isTab_Now: 1,
      };
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .et_0_6 {
    .main {
      .user {
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 20px;
      }
      .tab {
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 5px;
        padding: 20px;
        background-color: #f5f5f5;
        .btnY {
          color: #fff;
          background-color: #409eff;
          border-color: #409eff;
          font-weight: 700;
        }
        .btnN {
          background-color: #eee;
        }
        .box {
          margin: 0 auto;
          margin-top: 20px;
          border: 1px solid #ccc;
          background-color: #fff;
          padding: 50px;
          border-radius: 5px;
        }
      }
    }
    .tab_sty {
      border-collapse: collapse;
      th {
        display: inline-block;
        width: 8%;
        height: 48px;
        line-height: 24px;
        padding: 10px;
        background-color: #fafafa;
        border: 1px solid rgb(217, 217, 217);
      }
      td {
        display: inline-block;
        width: 10%;
        height: 48px;
        line-height: 24px;
        padding: 10px;
        border: 1px solid rgb(217, 217, 217);
        text-align: left;
      }
    }
    .no_bdb {
      td {
        border-bottom: none;
      }
    }
  }
  </style>